<template>
	<div>
		<el-dialog title="修改用户密码" :visible.sync="editpwdVisible" width="50%">
			<el-form :model="editform" :rules="editFormrules" ref="editFormRef" label-width="70px">
				<el-form-item label="用户名"><el-input disabled v-model="editform.loginName"></el-input></el-form-item>
				<el-form-item label="原密码" prop="pwd"><el-input v-model="editform.pwd" type="password"></el-input></el-form-item>
				<el-form-item label="新密码" prop="newpwd"><el-input v-model="editform.newpwd" type="password"></el-input></el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editpwdVisible = false">取 消</el-button>
				<el-button type="primary" @click="changepwd">确 定</el-button>
			</span>
		</el-dialog>

		<el-container class="home-container">
			<!-- 头部区 -->
			<el-header>
				<div>
					<img src="../assets/xiaoxiong.jpg" style="height: 50px;" />
					<span>招生后台管理系统 Bow down to the Gzc</span>
				</div>
				<el-dropdown @command="setDialogInfo">
					<span class="el-dropdown-link">
						<span style="color: white;">
							欢迎，
							<span style="color: white;">{{ username }}</span>
						</span>
						<span style="color: white;">用户设置</span>
						<i class="el-icon-arrow-down el-icon--right" style="color: white;font-size: 18px;"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item command="changepwdvisible">修改密码</el-dropdown-item>
						<el-dropdown-item command="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</el-header>
			<el-container>
				<!-- 侧边栏 -->
				<el-aside :width="iscollapse ? '64px' : '200px'">
					<!-- 侧边栏菜单区 -->
					<div class="toggle-button" @click="toggleCollapse">||||</div>
					<el-menu  style="height:800px;"
						:default-active="activepath"
						router
						:collapse-transition="false"
						:collapse="iscollapse"
						background-color="#333744"
						text-color="#fff"
						unique-opened="true"
						active-text-color="#409eff"
					>
						<!-- 一级菜单 -->
						<el-submenu v-for="item in menulist" :key="item.Id" :index="item.Id + ''">
							<!-- 一级菜单模板区 -->
							<template slot="title">
								<!-- 图标 -->
								<i :class="iconsObj[item.Id]"></i>

								<span>{{ item.Name }}</span>
							</template>
							<!-- 二级菜单 -->
							<el-menu-item v-if="subitem.ParentId == item.Id" @click="saveNavState('/' + subitem.Path)" v-for="subitem in menulist2" :index="'/' + subitem.Path">
								<template slot="title">
									<!-- 图标 -->
									<i class="el-icon-menu"></i>
									<!-- 文本 -->
									<span>{{ subitem.Name }}</span>
								</template>
							</el-menu-item>
						</el-submenu>
					</el-menu>
				</el-aside>
				<!-- 右侧主体 -->
				<el-main>
					<!-- 路由占位符 放welcome页面-->
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
export default {
	data() {
		return {
			//左侧菜单数据
			menulist: [],
			menulist2: [],
			username: '',
			editpwdVisible: false,
			iconsObj: {
				'1': 'iconfont icon-user',
				'2': 'iconfont icon-tijikongjian',
				'3': 'iconfont icon-shangpin',
				'4': 'iconfont icon-danju',
				'5': 'iconfont icon-baobiao',
				'6': 'iconfont icon-user',
				'7': 'iconfont icon-tijikongjian',
				'8': 'iconfont icon-shangpin',
				'9': 'iconfont icon-danju',
				'10': 'iconfont icon-baobiao',
				'11': 'iconfont icon-baobiao'
			},
			iscollapse: false,
			editFormrules: {
				pwd: [
					{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}
				],
				newpwd: [
					{
						required: true,
						message: '请输入新密码',
						trigger: 'blur'
					}
				]
			},
			// 被激活的高亮地址
			activepath: '',
			editform: {
				loginName: '',
				pwd: '',
				newpwd: ''
			}
		};
	},
	created() {
		this.getMenulist();
		this.activepath = window.sessionStorage.getItem('activepath');
	},
	methods: {
		logout() {
			window.sessionStorage.clear();
			this.$router.push('/Login');
		},
		async getMenulist() {
			const { data: res } = await this.$http.post('api/menu/getmenulist', {
				uid: parseInt(window.sessionStorage.getItem('token'))
			});

			this.menulist = res.data1;
			this.menulist2 = res.data2;
			this.username = res.username;
			this.editform.loginName = res.username;
		},
		// 菜单的展开与折叠
		toggleCollapse() {
			this.iscollapse = !this.iscollapse;
		},
		saveNavState(activepath) {
			// 设置一个sessionstorage 的key值 activepath
			window.sessionStorage.setItem('activepath', activepath);
			this.activepath = activepath;
		},
		// 下拉框选择，点击个人信息后调整到对应的函数执行
		setDialogInfo(comItem) {
			switch (comItem) {
				case 'changepwdvisible':
					this.changepwdvisible();
					break;
				case 'logout':
					this.logout();
					break;
			}
		},
		//修改密码对话框
		changepwdvisible() {
			this.editpwdVisible = true;
		},
		async changepwd() {
			this.$refs.editFormRef.validate(async valid => {
				if (!valid) return;
				const { data: res } = await this.$http.get('api/user/changepwd', {
					params: {
						loginName: this.editform.loginName,
						pwd: this.editform.pwd,
						newpwd: this.editform.newpwd
					}
				});
				if (res.code != 0) {
					return this.$message.error(res.msg);
				}
				this.$message.error(res.msg);
				this.editpwdVisible = false;
				this.logout();
			});
		}
	}
};
</script>

<style lang="less" scoped>
.el-header {
	background-color: #373d41;
	display: flex;
	justify-content: space-between;
	padding-left: 0;
	align-items: center;
	color: #fff;
	font-size: 20px;

	div {
		display: flex;
		align-items: center;

		span {
			padding-left: 15px;
		}
	}
}

.el-aside {
	background-color: #333744;

	//取消点击列表时向右扩充px就不会突出
	.el-menu {
		border-right: none;
		height: 100%;
	}
}

.el-main {
	background-color: #eaedf1;
}

//设置布局页面高度全屏
.home-container {
	height: 100%;
}
.iconfont {
	margin-right: 10px;
}

.toggle-button {
	background-color: #4a5064;
	font-size: 10px;
	line-height: 24px;
	color: white;
	text-align: center;
	// 字符间距
	letter-spacing: 0.4em;
	// 放上去有小手标识
	cursor: pointer;
}
</style>
